<template>
	<view class="home-pop-up">
		<u-popup :show="tkshow" mode="left" bgColor="#376DB5" @close="closePopUp">
			<view class="home-pop-up-box">
				<view class="pop-up-close">
					<u-icon name="close" color="#fff" size="22" @click="closePopUp"></u-icon>
				</view>
				<!-- 搜索 -->
				<view class="pop-up-search" @click="gotoSearch">
					<u--input color="#fff" fontSize="15" :placeholderStyle="placeholderStyleSearch" placeholder="文章检索"
						border="none"></u--input>
					<u-icon name="search" color="#fff" size="26" @click="closePopUp"></u-icon>
				</view>
				<!--  -->
				<view class="search-list">
					<view class="search-list-item font-28" @click="gotoHome">
						首页
					</view>
					<view class="search-list-item font-28" @click="gotoJour">
						期刊介绍
					</view>
					<view class="search-list-item font-28" @click="gotoJourDt">
						期刊动态
					</view>
					<view class="search-list-item font-28" @click="tgxz">
						投稿须知
					</view>
					<view class="search-list-item font-28" @click="gotoTgBk">
						投稿百科
					</view>
					<view class="search-list-item font-28" @click="gotoJob">
						招贤纳士
					</view>
					<view class="search-list-item font-28" @click="gotoLevelMsg">
						在线留言
					</view>
					<view class="search-list-item font-28" @click="gotoAbout">
						联系我们
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {}, 
		name: 'CommonTk',
		data() {
			return {
				tkshow:false,
				placeholderStyleSearch: 'font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #FFFFFF;',
			};
		},
		//在这初始化数据
		created() {

		},
		methods: {
			openShow() {
				this.tkshow = true
			},
			gotoSearch() {
				this.tkshow = false
				uni.navigateTo({
					url: '/pages/article/search'
				})
			},
			closePopUp() {
				this.tkshow = false
			},
			tgxz() {
				this.tkshow = false
				uni.navigateTo({
					url: '/pages/other/tg_xz'
				})
			},
			gotoJourDt() {
				this.tkshow = false
				uni.navigateTo({
					url: '/pages/journal_dynamics/index'
				})
			},
			gotoJour() {
				this.tkshow = false
				uni.navigateTo({
					url: '/pages/journal_introduction/index'
				})
			},
			gotoHome() {
				this.tkshow = false
				uni.redirectTo({
					url: '/pages/home/home'
				})
				 
			},
			gotoAbout() {
				this.tkshow = false
				uni.navigateTo({
					url: '/pages/other/about'
				})
			},
			gotoLevelMsg() {
				this.tkshow = false
				uni.navigateTo({
					url: '/pages/other/leave_message'
				})
			},
			gotoTgBk() {
				this.tkshow = false
				uni.navigateTo({
					url: '/pages/other/tg_bk'
				})
			},
			gotoJob() {
				this.tkshow = false
				uni.navigateTo({
					url: '/pages/other/job'
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.search-list {
		margin-top: 30rpx;
	}

	.search-list-item {
		font-weight: 400;
		color: #FFFFFF;
		width: 690rpx;
		height: 90rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2rpx solid #FFFFFF;
	}

	.pop-up-search {
		width: 686rpx;
		height: 66rpx;
		border: 1px solid #FFFFFF;
		border-radius: 33rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
	}

	.pop-up-close {
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	.home-pop-up-box {
		width: 750rpx;
	}
</style>